<template>
  <Card>
    <div class="searchBox">
      <Form ref="searchForm" :label-width="90" :model="searchForm" class="search-form" inline>
        <Form-item label="车牌号：" prop="license_plate_num">
          <Input
            v-model="searchForm.license_plate_num"
            clearable
            placeholder="支持模糊搜索"
            style="width: 200px"
            type="text"
          />
        </Form-item>
        <Form-item style="margin-left:-90px;">
          <Button icon="md-search" type="primary" @click="handleSearch">搜索</Button>
          <Button @click="handleReset">重置</Button>
        </Form-item>
      </Form>
    </div>
    <div class="btns">
      <Button icon="ios-add" target="_self" type="primary" @click="toAdd">批量添加</Button>
      <Button icon="md-trash" type="error" @click="delAll">删除</Button>
    </div>
    <div class="table">
      <Row>
        <Alert show-icon>
          已选择
          <span class="select-count">{{ selectCount }}</span> 项
          <a class="select-clear" @click="clearSelectAll">清空</a>
        </Alert>
      </Row>
      <Row>
        <vxe-table
          ref="table"
          :data="data"
          :loading="loading"
          :scroll-y="scrollY"
          border
          height="650"
          highlight-hover-row
          show-overflow
          size="mini"
          @checkbox-change="showSelect"
        >
          <vxe-table-column align="center" fixed="left" type="checkbox" width="60"></vxe-table-column>
          <vxe-table-column align="center" fixed="left" title="序号" type="seq" width="60"></vxe-table-column>
          <vxe-table-column align="center" field="license_plate_num" title="车牌号" width="120"></vxe-table-column>
          <vxe-table-column align="center" field="bus_type" title="车辆类型" width="100"></vxe-table-column>
          <vxe-table-column align="center" field="brand" title="车辆品牌" width="100"></vxe-table-column>
          <vxe-table-column align="center" field="type_time_1" title="二级维护" width="100"></vxe-table-column>
          <vxe-table-column align="center" field="type_time_2" title="更换机油" width="100"></vxe-table-column>
          <vxe-table-column align="center" field="type_time_9" title="更换空滤" width="100"></vxe-table-column>
          <vxe-table-column align="center" field="type_time_3" title="更换齿轮油" width="100"></vxe-table-column>
          <vxe-table-column align="center" field="type_time_4" title="更换滤芯（高压）" width="120"></vxe-table-column>
          <vxe-table-column align="center" field="type_time_5" title="更换滤芯（低压）" width="120"></vxe-table-column>
          <vxe-table-column align="center" field="type_time_6" title="灭火器" width="100"></vxe-table-column>
          <vxe-table-column align="center" field="type_time_7" title="灭火弹" width="100"></vxe-table-column>
          <vxe-table-column align="center" field="type_time_8" title="防冻液" width="100"></vxe-table-column>
          <vxe-table-column align="center" field="engine_num" title="发动机号" width="150"></vxe-table-column>
          <vxe-table-column align="center" field="frame_nun" title="车架号" width="180"></vxe-table-column>
          <vxe-table-column align="center" fixed="right" title="操作" width="120">
            <template v-slot="{ row }">
              <a
                class="edit"
                style="color:#2d8cf0;font-size: 12px;"
                type="text"
                @click="edit(row)"
              >查看详情</a>
            </template>
          </vxe-table-column>
        </vxe-table>
      </Row>
    </div>
    <Modal
      v-model="charteredCarFixedModalVisible"
      :mask-closable="false"
      :title="charteredCarFixedModalTitle"
      :width="750"
    >
      <Form
        ref="charteredCarFixedForm"
        :label-width="100"
        :model="charteredCarFixedForm"
        :rules="charteredCarFixedFormValidate"
      >
        <Row>
          <Col span="12">
          <FormItem label="类型：" prop="type">
            <Select v-model="charteredCarFixedForm.type">
              <Option v-for="item in types" :key="item.value" :value="item.value">{{ item.label }}</Option>
            </Select>
          </FormItem>
          </Col>
          <Col span="12">
          <FormItem label="日期：" prop="date">
            <DatePicker
              v-model="charteredCarFixedForm.date"
              format="yyyy-MM-dd"
              placeholder="选择时间"
              type="date"
              @on-change="charteredCarFixedForm.date=$event"
            ></DatePicker>
          </FormItem>
          </Col>
        </Row>
        <Form :label-width="100">
          <FormItem label="选择车辆：">
            <Select v-model="objectType">
              <Option :value="0">全部车辆</Option>
              <Option :value="1">按车辆类型</Option>
              <Option :value="2">按车辆品牌</Option>
              <Option :value="3">自定义车辆</Option>
            </Select>
          </FormItem>
        </Form>
        <Alert v-if="objectType===0" show-icon>设置全部车辆</Alert>
        <Alert v-if="objectType===1" show-icon>选择车辆类型进行设置</Alert>
        <Alert v-if="objectType===2" show-icon>选择车辆品牌进行设置</Alert>
        <Alert v-if="objectType===3" show-icon>请选择车辆</Alert>
        <div v-if="objectType===1" style="margin-top:15px">
          <RadioGroup v-model="busType" vertical>
            <Radio label="0">
              <span>燃油车</span>
            </Radio>
            <Radio label="1">
              <span>纯电动</span>
            </Radio>
          </RadioGroup>
        </div>
        <div v-if="objectType===2" style="margin-top:15px">
          <RadioGroup v-model="busBrand" vertical>
            <Radio label="0">
              <span>东风牌</span>
            </Radio>
            <Radio label="1">
              <span>亚星牌</span>
            </Radio>
            <Radio label="2">
              <span>宇通牌</span>
            </Radio>
            <Radio label="3">
              <span>中通牌</span>
            </Radio>
          </RadioGroup>
        </div>
        <div v-if="objectType===3" style="margin-top:15px">
          <Tree ref="lineTree" :data="data2" show-checkbox></Tree>
        </div>
      </Form>
      <div slot="footer">
        <Button type="text" @click="charteredCarFixedHandleCancel">取消</Button>
        <Button
          :loading="charteredCarFixedSubmitLoading"
          type="primary"
          @click="charteredCarFixedHandleSubmit"
        >提交
        </Button>
      </div>
    </Modal>
  </Card>
</template>
<script>
import {delTwoLevelMainte, store, twoLevelMainteList} from '../../api/twoLevelMainte'
import {getLineLicensePlateNum} from '../../api/bus'

export default {
  data() {
    return {
      selectCount: 0, // 多选计数
      selectList: [], // 多选数据
      searchForm: {
        license_plate_num: '',
      },
      scrollY: {gt: 30},
      loading: false,
      data: [],
      data2: [],
      objectType: 0,
      busType: '',
      busBrand: '',
      types: [
        {value: '二级维护', label: '二级维护'},
        {value: '更换机油', label: '更换机油'},
        {value: '更换空滤', label: '更换空滤'},
        {value: '更换齿轮油', label: '更换齿轮油'},
        {value: '更换滤芯（高压）', label: '更换滤芯（高压）'},
        {value: '更换滤芯（低压）', label: '更换滤芯（低压）'},
        {value: '灭火器', label: '灭火器'},
        {value: '灭火弹', label: '灭火弹'},
        {value: '防冻液', label: '防冻液'},
      ],
      charteredCarFixedSubmitLoading: false,
      charteredCarFixedModalType: 0,
      charteredCarFixedModalVisible: false,
      charteredCarFixedModalTitle: '',
      charteredCarFixedForm: {
        type: '',
        date: '',
      },
      charteredCarFixedFormValidate: {
        license_plate_num: [
          {
            required: true,
            message: '车牌号不能为空',
            trigger: 'change',
            type: 'string'
          }
        ]
      },
    }
  },
  watch: {
    $route(to, from) {
      if (from.name !== 'twoLevelMainte') {
        // this.handleReset()
      }
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    clearSelectAll() {
      this.$refs.table.clearCheckboxRow()
    },
    del(row) {
      this.$Modal.confirm({
        title: '确认删除',
        loading: true,
        content: '您确认要删除此条数据吗？',
        onOk: () => {
          const ids = row.id
          // 批量删除
          delTwoLevelMainte(ids).then(res => {
            this.$Modal.remove()
            if (res.data === true) {
              this.$Message.success(res.message)
              this.getTwoLevelMainteList()
            } else {
              this.$Message.error(res.message)
            }
          })
        }
      })
    },
    delAll() {
      if (this.selectCount <= 0) {
        this.$Message.warning('您还未选择要删除的数据')
        return
      }
      this.$Modal.confirm({
        title: '确认删除',
        loading: true,
        content: '您确认要删除所选的 ' + this.selectCount + ' 条数据？',
        onOk: () => {
          let ids = ''
          this.selectList.forEach(function (e) {
            ids += e.id + ','
          })
          ids = ids.substring(0, ids.length - 1)
          // 批量删除
          delTwoLevelMainte(ids).then(res => {
            this.$Modal.remove()
            if (res.data === true) {
              this.$Message.success(res.message)
              this.getTwoLevelMainteList()
            } else {
              this.$Message.error(res.message)
            }
          })
        }
      })
    },
    edit(row) {
      console.log(row)
      this.$router.push({
        name: 'editTwoLevelMainte',
        params: {
          license_plate_num: row.license_plate_num
        }
      })
    },
    getTwoLevelMainteList() {
      this.loading = true
      this.clearSelectAll()
      twoLevelMainteList(this.searchForm).then(res => {
        this.loading = false
        if (res.data) {
          this.data = res.data.personnel
        }
      })
    },
    handleReset() {
      this.$refs.searchForm.resetFields()
      // 重新加载数据
      this.getTwoLevelMainteList()
    },
    handleSearch() {
      this.getTwoLevelMainteList()
    },
    init() {
      this.getTwoLevelMainteList()
    },
    showSelect({checked, records}) {
      this.selectList = records
      this.selectCount = records.length
    },
    toAdd() {
      this.charteredCarFixedModalType = 0
      this.charteredCarFixedModalTitle = '添加'
      this.$refs.charteredCarFixedForm.resetFields()
      this.objectType = 0
      this.busBrand = ''
      this.busType = ''
      delete this.charteredCarFixedForm.id
      getLineLicensePlateNum().then(res => {
        this.data2 = res.data
        this.charteredCarFixedModalVisible = true
      })
    },
    charteredCarFixedHandleCancel() {
      this.charteredCarFixedModalVisible = false
    },
    charteredCarFixedHandleSubmit() {
      this.$refs.charteredCarFixedForm.validate(valid => {
        if (valid) {
          let depIds = ''
          if (this.objectType === 3) {
            const selectedNodes = this.$refs.lineTree.getCheckedNodes()
            if (selectedNodes.length < 1) {
              this.$Message.error('请至少选择一条数据')
              return
            }
            selectedNodes.forEach(function (e) {
              if (!isNaN(e.license_plate_num)) {
                depIds += e.license_plate_num + ','
              }
            })
            this.charteredCarFixedForm.depIds = depIds.substring(
              0,
              depIds.length - 1
            )
          } else if (this.objectType === 1) {
            this.charteredCarFixedForm.bus_type = this.busType
          } else if (this.objectType === 2) {
            this.charteredCarFixedForm.bus_brand = this.busBrand
          }
          this.charteredCarFixedForm.object_type = this.objectType
          this.charteredCarFixedSubmitLoading = true
          if (this.charteredCarFixedModalType === 0) {
            // 添加 避免编辑后传入id等数据 记得删除
            delete this.charteredCarFixedForm.id
            store(this.charteredCarFixedForm).then(res => {
              this.charteredCarFixedSubmitLoading = false
              if (res.data) {
                this.$Message.success(res.message)
                this.getTwoLevelMainteList()
                this.charteredCarFixedModalVisible = false
              } else {
                this.$Message.error(res.message)
              }
            })
          } else {
            update(
              this.charteredCarFixedForm,
              this.charteredCarFixedForm.id
            ).then(res => {
              this.charteredCarFixedSubmitLoading = false
              if (res.data) {
                this.$Message.success(res.message)
                this.getFixedCostList()
                this.charteredCarFixedModalVisible = false
              } else {
                this.$Message.error(res.message)
              }
            })
          }
        }
      })
    },
  }
}
</script>
